<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>tp5 + layui 上传图片</title>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all"/>
    <link rel="stylesheet" href="__CSS__/admin.css" media="all">
    <style>
        .thumb {margin-left:5px; margin-top:15px; height:128px}
        #prevModal {width:100%; height:100%; text-align:center;display: none;}
        #img_prev {max-width:98%; max-height:98%; margin: 10px auto}
        .dtr{display: flex;width: 800px !important;}
        .dtro{float: left;width: 77px;text-align: center;line-height: 38px;background: #eceeef;}
        .dtrt{float: left;}
        .dtrf{float: left;line-height: 38px;text-align: center;width: 50px;background: #eceeef;}
        .dtd{display: flex;width: 100%;}
        .dtdo{float: left;width: 50px;text-align: center;height: 30px;line-height: 30px;background: #eceeef;}
        .dtdt{float: left;line-height: 30px !important;height: 30px !important;}
        .dtdf{float: left;height: 30px;line-height: 30px;text-align: center;width: 38px;background: #eceeef;}
        .dtt{border: 1px solid #eee;width: 800px!important;padding: 10px;}
        .dtto{display: flex;padding: 0 0 5px 0;}
        .dttoo{background: #eee;color: #fff;width: 1rem;height: 1rem;text-align: center;line-height: 1rem; border-radius: 999px;}
        .dttt{display: -webkit-box;}
        .dttto{display: -webkit-box;background: #eee;margin-right:1rem;overflow: hidden;}
        .dtttot{padding:0 7px;display: inline-block;line-height: 30px;}
        .dtttof{padding: 0.35rem 0.79rem;background: #d4cece;color: #fff;font-size: 1rem;font-weight: bold;}
        .dtdta{line-height: 30px !important;height: 30px !important;}
        .ctv{width: 80% !important;}
        .son{display: -webkit-box}
        .editinp{width: 100%;height: 18px;border: none;}
        .editinpi{margin: 0 5px 0 5px;width: 50px;}
    </style>
</head>
<body style="padding:10px;">
<div class="tplay-body-div">
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li><a href="{:url('admin/goods/goods')}" class="a_menu">店铺商品管理</a></li>
            <li class="layui-this">新增商品</li>
        </ul>
    </div>
    <div style="margin-top: 20px;">
    </div>
    <form class="layui-form" method="post" id="form-article-add" action="{:url('admin/goods/edit_goods')}"
          enctype="multipart/form-data">

        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-inline">
                <input name="title" lay-verify="required" {notempty name="$info.title"}value="{$info.title}"{/notempty} placeholder="请输入名称" autocomplete="off"
                class="layui-input"
                type="text">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">所属分类</label>
            <div class="layui-input-inline">
                <input type="hidden" {notempty name="$info.type"}value="{$info.type}"{/notempty} id="settype">
                <select lay-filter="getTypeTwo" id="getTypeTwo" name="type">
                    <option value="">请选择</option>
                    {volist name="typeone" id="v"}
                    <option value="{$v.id}" {notempty name="$info.typeone"}{eq name="$v.id" value="$info.typeone"}selected=""{/eq}{/notempty}>{$v.title}</option>
                    {/volist}
                </select>
            </div>

        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品单位</label>
            <div class="layui-input-inline">
                <input name="unit" lay-verify="required" {notempty name="$info.unit"}value="{$info.unit}"{/notempty} placeholder="件/份..." autocomplete="off"
                class="layui-input"
                type="text">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-inline">
                <input name="price" lay-verify="required" {notempty name="$info.price"}value="{$info.price}"{/notempty} placeholder="" autocomplete="off"
                class="layui-input"
                type="text">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">配送费</label>
            <div class="layui-input-inline">
                <input name="ship_fee" lay-verify="required" {notempty name="$info.ship_fee"}value="{$info.ship_fee}"{/notempty} placeholder="" autocomplete="off"
                class="layui-input"
                type="text">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">已售销量</label>
            <div class="layui-input-inline">
                <input name="have_sales" lay-verify="required" {notempty name="$info.have_sales"}value="{$info.have_sales}"{/notempty} placeholder="" autocomplete="off"
                class="layui-input"
                type="text">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否推荐</label>
            <div class="layui-input-block">
                <input type="checkbox" name="is_recommend" {notempty name="$info['is_recommend']"}{if condition="$info['is_recommend'] eq 1"}checked="checked"{/if}{/notempty} lay-skin="switch" lay-filter="switchTest" lay-text="是|否">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">规格组</label>
            <div class="layui-input-inline dtr">
                <div class="dtro">规格组</div>
                <div class="dtrt"><input name="spec" id="specval" lay-verify="required" autocomplete="off" placeholder="颜色、尺码等" class="layui-input" type="text"></div>
                <div class="dtrf addspec">添加</div>
            </div>
        </div>

        <div id="ggz">
            {notempty name="$spec_i"}
            {volist name="$spec_i" id="v"}
            <div class="layui-form-item" id="{$v['id']}spec">
                <label class="layui-form-label"></label>
                <div class="dtb">
                    <div class="layui-input-inline dtt">    
                        <div class="dtto">
                            <div><b>{$v['title']}</b></div>
                            <a class="dttoo delspec" onclick="delone({$v.id})">×</a>
                        </div>
                        <div class="dttt">
                            <div class="son" id="{$v['id']}son">
                                {notempty name="$v.arr"}
                                {volist name="$v.arr" id="vv"}
                                <div class="dttto" id="{$vv.id}cl">
                                    <span class="dtttot">{$vv.title}</span>
                                    <a class="dtttof" onclick="delspecson({$vv.id})">×</a>
                                </div>
                                {/volist}
                                {/notempty}
                            </div>
                            <div class="dtd">
                                <div class="dtdo">规格值</div>
                                <div class="dtdt"><input name="spec" lay-verify="required" id="{$v['id']}spectwo" autocomplete="off" placeholder="颜色、尺码等" class="layui-input dtdta" type="text"></div>
                                <div class="dtdf" onclick="addspecson({$v['id']})">添加</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {/volist}
            {/notempty}
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">库存价格</label>
            <div class="layui-input-inline ctv">
                <table class="layui-table" lay-size="sm" id="table">
                    <thead>
                    {notempty name="$spec"}
                    {volist name="$spec" id="v"}
                    <th>{$v.title}</th>
                    {/volist}
                    {/notempty}
                    <th>库存<input type="text" class="editinpi" id="setinventory"><a href="javascript:;" onclick="setinventory()">一键设置</a></th>
                    <th>价格<input type="text" class="editinpi" id="setgrowth"><a onclick="setgrowth()">一键设置</a></th>
                    </tr>
                    </thead>
                    <tbody>
                    {notempty name="$spec_val"}
                    {volist name="$spec_val" id="v"}
                    <tr>
                        {notempty name="$spec"}
                        {volist name="$spec" id="vo"}
                        <td>{notempty name="$v[$vo.str]"}{$v[$vo.str]}{/notempty}</td>
                        {/volist}
                        {/notempty}
                        <td><input type="text" class="editinp a" value="{$v.inventory}" name="inventory[]"></td>
                        <td><input type="text" class="editinp b" value="{$v.growth}" name="growth[]"><input type="hidden" value="{$v.spec}" name="spec_val[]"></td>
                    </tr>
                    {/volist}
                    {/notempty}
                    </tbody>
                </table>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">缩略图</label>
            <div>
                <input name="thumb[]" type="file" value="" multiple='multiple'/>
            </div>

        </div>
        {notempty name="$info.thumb"}
        <div class="layui-upload-list">
            <label class="layui-form-label"></label>
            <img class="layui-upload-img" width="150" height="150" src="{$info.thumb}">
        </div>
        {/notempty}

        <div class="layui-form-item">
            <label class="layui-form-label">主图</label>
            <div>
                <input name="main_figure[]" type="file" value="" multiple='multiple'/>
            </div>
        </div>

        {notempty name="$main_figure"}
        <div class="layui-upload-list">
            <label class="layui-form-label"></label>
            {volist name="$main_figure" id="v"}
            <img class="layui-upload-img" width="150" height="150" src="{$v}">
            {/volist}
        </div>
        {/notempty}


        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">商品介绍</label>
            <div class="layui-input-block" style="max-width:80%;">
            <textarea placeholder="请输入内容" class="layui-textarea" name="content" id="container"
                      style="border:0;padding:0">{notempty name="$info.content"}{$info.content}{/notempty}</textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="hidden" id="edit_value" name="edit_value" {notempty name="$info.edit_value"}value='{$info.edit_value}'{/notempty}>
                <input type="hidden" {notempty name="$info.id"}value="{$info.id}"{/notempty} name="id">
                <input type="submit" class="layui-btn" value="立即提交">
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <script src="__PUBLIC__/layui/layui.js"></script>
    <script src="__PUBLIC__/jquery/jquery.min.js"></script>
    <script>
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer,
                $ = layui.jquery,
                form = layui.form;

            form.on('select(getTypeTwo)', function (data) {
                $.ajax({
                    url: "{:url('admin/goods/getTypeTwo')}",
                    data: {id: data.value},
                    success: function (res) {
                        $("#typetwo").html(res);
                        form.render('select');
                    }
                })
            });
            layer.ready(function(){
                var getTypeTwo = $('#getTypeTwo').val();
                if(getTypeTwo>0){
                    var settype = $('#settype').val();
                    $.ajax({
                        url: "{:url('admin/goods/getTypeReady')}",
                        data: {id: getTypeTwo,son:settype},
                        success: function (res) {
                            $("#typetwo").html(res);
                            form.render('select');
                        }
                    })
                }
            });
        });
    </script>

    <script id="container" name="content" type="text/plain"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
    <script>
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //日期时间选择器

            //时间选择器
            laydate.render({
                elem: '#test4'
                ,type: 'datetime'
            });

            //时间选择器
            laydate.render({
                elem: '#test5'
                ,type: 'datetime'
            });
        });

    </script>


    <script>//添加父类规格
        $('.addspec').click(function () {
            var edit_value = $('#edit_value').val();
            var value = $('#specval').val();
            $.ajax({
                url: "{:url('admin/goods/addspec')}",
                data: {edit_value: edit_value,value:value},
                success: function (res) {
                    if(res.code == 1){
                        $('#ggz').append(res.msg);
                        $('#edit_value').val(res.edit_value);
                    }else{
                        layer.msg(res.msg);
                    }
                }
            })
        })
    </script>
    <script>//删除父类规格
        function delone(id) {
            var edit_value = $('#edit_value').val();
            $.ajax({
                url: "{:url('admin/goods/delspec')}",
                data: {id: id,edit_value:edit_value},
                success: function (res) {
                    $('#'+res.id).remove();
                    $('#table').html(res.table);
                    $('#edit_value').val(res.edit_value);
                }
            })
        }
    </script>
    <script>//添加子类规格
        function addspecson(id) {
            var value = $('#'+id+'spectwo').val();
            var edit_value = $('#edit_value').val();
            $.ajax({
                url: "{:url('admin/goods/addspecson')}",
                data: {edit_value: edit_value,value:value,id:id},
                success: function (res) {
                    if(res.code == 1){
                        $('#'+id+'son').append(res.msg);
                        $('#table').html(res.table);
                        $('#edit_value').val(res.edit_value);
                    }else{
                        layer.msg(res.msg);
                    }
                }
            })
        }
    </script>
    <script>//删除子类规格
        function delspecson(id) {
            var edit_value = $('#edit_value').val();
            $.ajax({
                url: "{:url('admin/goods/delspecson')}",
                data: {id: id,edit_value:edit_value},
                success: function (res) {
                    $('#'+res.id).remove();
                    $('#table').html(res.table);
                    $('#edit_value').val(res.edit_value);
                }
            })
        }
    </script>
    <script>
        function setinventory() {
            var value = $('#setinventory').val();
            $('.a').val(value);
        }
        function setgrowth() {
            var value = $('#setgrowth').val();
            $('.b').val(value);
        }
    </script>

    </script>
    </div>
    </body>
    </html>